<template>
  <div class="equip-status">
    <main-left @change="change"/>
    <div class="right">
    <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="设备状态监控" name="first">
          <equip-monitor v-if="showEquipMonitor" :pointCode="point.pointCode"/>
        </el-tab-pane>
        <el-tab-pane label="流程日志" name="second">
          <info  v-if="showInfo"  :pointCode="point.pointCode"/>
        </el-tab-pane>
        <el-tab-pane label="关键参数" name="third">
          <main-param  v-if="showParam" :pointCode="point.pointCode"/>
        </el-tab-pane>
        <el-tab-pane label="核查记录" name="fourth">
          <record  v-if="showRecord"  :pointCode="point.pointCode" />
        </el-tab-pane>
    </el-tabs>
    </div>

  </div>
</template>
<script>
import EquipMonitor from './components/equip-monitor';
import Info from './components/info';
import MainParam from './components/param';
import Record from './components/record';
import MainLeft from './components/left';
export default {
  components: {
    EquipMonitor, Info, MainParam, Record, MainLeft
  },
  data() {
    return {
      pointList: [],
      form: {
        pointCode: ''
      },
      point: {},
      showEquipMonitor: true,
      showInfo: false,
      showParam: false,
      showRecord: false,
      activeName: 'first'
    };
  },
  created() {
    this.getPointList();
  },
  watch: {
    activeName(n) {
      if (n === 'first') {
        this.showEquipMonitor = true;
      }
      if (n === 'second') {
        this.showInfo = true;
      }
      if (n === 'third') {
        this.showParam = true;
      }
      if (n === 'fourth') {
        this.showRecord = true;
      }
    }
  },
  methods: {
    search() {

    },
    change(item) {
      this.point = item;
    },
    getPointList() {
      const params = {
        url: `/api/ems/station/list`,
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.pointList = rows.map(item => {
            return {
              label: item.pointName,
              value: item.pointCode
            };
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.equip-status{
  height: 100%;
  display: flex;
  .right{
        flex: 1;
  }
}
</style>